<section class="address-overview">
  <div class="row">
    <div class="card-section col-md-12 col-lg-8 pr-0-md">
      <div class="card">
        <div class="card-body">
          <h1 class="card-title">
            <%= if token_name?(@token) do %>
              <%= @token.name %>
            <% else %>
              <%= gettext("Token Details") %>
            <% end %>
            <!-- buttons -->
            <span class="overview-title-buttons float-right">
              <span class="overview-title-item" data-clipboard-text="<%= @token.contract_address_hash %>">
                <span
                  aria-label='<%= gettext("Copy Address") %>'
                  class="btn-copy-icon"
                  data-placement="top"
                  data-toggle="tooltip"
                  title='<%= gettext("Copy Address") %>'
                >
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.5 32.5" width="32" height="32">
                    <path fill-rule="evenodd" d="M23.5 20.5a1 1 0 0 1-1-1v-9h-9a1 1 0 0 1 0-2h10a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zm-3-7v10a1 1 0 0 1-1 1h-10a1 1 0 0 1-1-1v-10a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1zm-2 1h-8v8h8v-8z"/>
                  </svg>
                </span>
              </span>
              <span
                class="overview-title-item"
                data-target="#qrModal"
                data-toggle="modal"
              >
                <span
                  class="btn-qr-icon"
                  data-toggle="tooltip"
                  data-placement="top"
                  title='<%= gettext("QR Code") %>'
                  aria-label='<%= gettext("Show QR Code") %>'
                >
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.5 32.5" width="32" height="32">
                    <path fill-rule="evenodd" d="M22.5 24.5v-2h2v2h-2zm-1-4v-1h1v1h-1zm1-3h2v2h-2v-2zm1-2h-5a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1zm-1-5h-3v3h3v-3zm-8 14h-5a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1zm-1-5h-3v3h3v-3zm1-4h-5a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1zm-1-5h-3v3h3v-3zm6 9h-2v-2h2v2zm1 1h-1v-1h1v1zm0 1v1h-1v-1h1zm-1 3h-2v-2h2v2z"/>
                  </svg>
                </span>
              </span>
            </span>
          </h1>

          <h3><%= to_string(@token.contract_address_hash) %></h3>

          <div class="d-flex flex-column flex-md-row justify-content-start text-muted">
            <span class="mr-4 mb-3 mb-md-0">
              <%= link to:
                  address_path(@conn, :show, @token.contract_address_hash),
                  "data-test": "token_contract_address"
              do %>
                <%=  gettext "View Contract" %>
              <% end %>
            </span>
            <div class="d-flex flex-row justify-content-start text-muted">
              <span class="mr-4"> <%= @token.type %> </span>
              <span class="mr-4"><%= @total_token_holders %>  <%= gettext "Addresses" %></span>
              <span class="mr-4"><%= @total_token_transfers %> <%= gettext "Transfers" %></span>
              <%= if decimals?(@token) do %>
                <span class="mr-4"><%= @token.decimals %> <%= gettext "Decimals" %></span>
              <% end %>
            </div>
          </div>
        </div>
      </div>
    </div>

    <%= if total_supply?(@token) do %>
      <div class="card-section col-md-12 col-lg-4 pl-0-md">
        <div class="card card-background-1">
          <div class="card-body">
            <h2 class="card-title balance-card-title"><%= gettext "Total Supply" %></h2>
            <div class="text-right">
              <h3 class="text-uppercase">
                <%= if decimals?(@token) do %>
                  <%= format_according_to_decimals(@token.total_supply, @token.decimals) %>
                <% else %>
                  <%= format_integer_to_currency(@token.total_supply) %>
                <% end %> <%= @token.symbol %>
              </h3>
              <%= if @token.usd_value do %>
                <div class="text-uppercase">
                  <span data-selector="token-supply-usd" data-usd-value="<%= total_supply_usd(@token) %>"></span>
                  |
                  <span data-selector="token-price" data-token-usd-value="<%= @token.usd_value %>"></span>
                </div>
              <% else %>
                <br />
              <% end %>
            </div>
          </div>
        </div>
      </div>
    </div>
  <% end %>
</section>
<!-- Modal -->
<div class="modal fade" id="qrModal" tabindex="-1" role="dialog" aria-labelledby="qrModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title" id="qrModalLabel"><%= gettext "QR Code" %></h2>
        <button type="button" class="close" data-dismiss="modal" aria-label="<%= gettext("Close") %>">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <img src="data:image/png;base64, <%= BlockScoutWeb.AddressView.qr_code(@token.contract_address_hash) %> " class="qr-code" alt="qr_code" title="<%= @token.contract_address %>" />
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal"><%= gettext "Close" %></button>
      </div>
    </div>
  </div>
</div>
